import "./index.scss"
import {useEffect} from "react"
import { $http } from "../../api";
import {mbdata} from "../../mobx/data"
import { Layout,Breadcrumb  } from 'antd';
import Menu from "./menu"
import Head from "./head";
import {Switch,Route,Redirect} from "react-router-dom"
import react,{Suspense,lazy} from "react"

const { Header, Footer, Sider, Content } = Layout;

export default function MainBox(){
    useEffect(()=>{
        const {userInfo} = mbdata
        // 优化  避免每次重复请求 
        if(!userInfo){
          $http.getuserinfo()
          .then(res=>{
              if(res.code==200){
                  mbdata.changeUserInfo(res.result)
              }
          })
        }
        
    },[])

    return (
        <div style={{width:"100%",height:'100%'}}>
            <Layout style={{width:"100%",minHeight:'100%',height:'100%',display:'flex',flexDirection:'row'}}>
                 <div className="menu">
                    <Menu/>    
                 </div>
                 <Layout style={{flex:"auto",height:'100%'}}>
                     <div className="head" style={{width:"100%"}}>
                        <Head/>
                     </div>

                     <Layout style={{padding:'0 10px'}}>
                        <Breadcrumb style={{ margin: '10px 0' }}>
                            <Breadcrumb.Item>Home</Breadcrumb.Item>
                            <Breadcrumb.Item>List</Breadcrumb.Item>
                            <Breadcrumb.Item>App</Breadcrumb.Item>
                        </Breadcrumb>
                        <Content style={{padding:10,minHeight:520,height:'auto',background:'#e4e4e4',overflow:'auto'}}>
                        <Suspense fallback={<div></div>}>   
                            <Switch >
                                <Route path="/main" exact   render={()=>(<Redirect to="/main/home" /> )} />
                                <Route path="/main/home"    component={lazy(()=>import('../home/home'))} />
                               
                                <Route path="/main/anno"    render={()=>(
                                    <Switch>
                                         <Route path="/main/anno/add"    component={lazy(()=>import('../anno/add'))} />
                                         <Route path="/main/anno/list"    component={lazy(()=>import('../anno/list'))} />
                                    </Switch>
                                )}/>


                                <Route path="/main/advise"    render={()=>(
                                    <Switch>
                                         <Route path="/main/advise/list"    component={lazy(()=>import('../advise/list'))} />
                                         <Route path="/main/advise/add"    component={lazy(()=>import('../advise/add'))} />
                                    </Switch>
                                )}/>    

                                <Route path="/main/user"    render={()=>(
                                    <Switch>
                                         <Route path="/main/user/list"    component={lazy(()=>import('../user/list'))} />
                                         <Route path="/main/user/add"    component={lazy(()=>import('../user/add'))} />
                                         <Route path="/main/user/fenxi"    component={lazy(()=>import('../user/fenxi'))} />
                                    </Switch>
                                )}/>   
                               
                               <Route path="/main/role"    render={()=>(
                                    <Switch>
                                         <Route path="/main/role/list"    component={lazy(()=>import('../role/list'))} />
                                         <Route path="/main/role/action"    component={lazy(()=>import('../role/action'))} />
                                         <Route path="/main/role/fenxi"    component={lazy(()=>import('../role/fenxi'))} />
                                    </Switch>
                                )}/>   

                                <Route path="/main/grade"    render={()=>(
                                    <Switch>
                                         <Route path="/main/grade/list"    component={lazy(()=>import('../grade/list'))} />
                                         <Route path="/main/grade/add"    component={lazy(()=>import('../grade/add'))} />
                                         <Route path="/main/grade/fenxi"    component={lazy(()=>import('../grade/fenxi'))} />
                                         <Route path="/main/grade/my"    component={lazy(()=>import('../grade/my'))} />
                                    </Switch>
                                )}/>   


                                <Route path="/main/kaoqin"    render={()=>(
                                    <Switch>
                                         <Route path="/main/kaoqin/clock"    component={lazy(()=>import('../kaoqin/clock'))} />
                                         <Route path="/main/kaoqin/qingjia"    component={lazy(()=>import('../kaoqin/qingjia'))} />
                                
                                    </Switch>
                                )}/>   
                                
                                <Route path="/main/info"    component={lazy(()=>import('../mine/mine'))} />

                                <Route component={()=>(<Redirect to="/404" />)}/>
                            </Switch>
                        </Suspense> 
                        </Content> 
                     </Layout>
                     <Footer style={{textAlign:'center',minHeight:50,padding:20}}>
                                用心做企业 &copy;  
                    </Footer> 
                 </Layout>
            </Layout>  
        </div>
    )
}